<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>评论列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script src="./libs/template-web.js"></script>
    <!-- 分页框文件引入 -->
 <script src="./libs/jquery.twbsPagination.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="common_title">
        评论列表
      </div>
      <div class="container-fluid common_con">
        <table class="table table-striped table-bordered table-hover mp20">
          <thead>
            <tr>
              <th>作者</th>
              <th>评论</th>
              <th>评论在</th>
              <th>提交于</th>
              <th>状态</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>

        <!-- 分页栏 -->
        <div class="row text-center">
          <!-- <ul class="pagination pagination-sm">
          <li class="page-item first disabled"><a href="#" class="page-link">首页</a></li>
          <li class="page-item prev disabled"><a href="#" class="page-link">上一页</a></li>
          <li class="page-item active"><a href="#" class="page-link">1</a></li>
          <li class="page-item"><a href="#" class="page-link">2</a></li>
          <li class="page-item"><a href="#" class="page-link">3</a></li>
          <li class="page-item"><a href="#" class="page-link">4</a></li>
          <li class="page-item"><a href="#" class="page-link">5</a></li>
          <li class="page-item"><a href="#" class="page-link">6</a></li>
          <li class="page-item"><a href="#" class="page-link">7</a></li>
          <li class="page-item next"><a href="#" class="page-link">下一页</a></li>
          <li class="page-item last"><a href="#" class="page-link">尾页</a></li>
        </ul>
        <ul id="pagination" class="pagination-sm"></ul> -->

        <ul id="pagination" class="pagination-sm"></ul>
          <div class="box">亲，没有数据了哦！！！</div>
        </div>
      </div>
    </div>
  </body>
  <script src="./libs/http.js"></script>
  <script type="text/html" id="listId">
    {{each data.data}}
    {{if $value.state == "待审核"}}
    <tr class = "danger">
    {{else}}
    <tr>
    {{/if}}
      <td>{{$value.author}}</td>
      <td>{{$value.content}}</td>
      <td>{{$value.title}}</td>
      <td>{{$value.date}} {{$value.time}}</td>
      <td>{{$value.state}}</td>
      <td class="text-center">
          {{if $value.state == '待审核'}}
          <a href="javascript:editTr( 'rejected',11 );" data-id='{{$value.id}}' class="btn btn-primary btn-xs btn-pass">通过</a>
          {{else if $value.state == '已通过'}}
          <a href="javascript:editTr( 'rejected',11 );" data-id='{{$value.id}}' class="btn btn-warning btn-xs btn-nopass">拒绝</a>
          {{else if $value.state == '已拒绝'}}
          <a href="javascript:editTr( 'rejected',11 );" data-id='{{$value.id}}' class="btn btn-success btn-xs btn-pass">通过</a>
          {{/if}}
           <a href="javascript:editTr( 'trashed',11 );" data-id='{{$value.id}}' class="btn btn-danger btn-xs btn-delete">删除</a>
         </td>
       </tr>
    {{/each}}
  </script>
  <script>
    $(function() {
      // 渲染评论列表
      let mypage = 1;
      let perpage = 10;


  function getComData(pages,callback){
    $.get({
        url: BigNew.comment_list,
        data: {
          page: pages, //当前页
          perpage: perpage //每页显示的条数
        },
        success: function(res) {
          if (res.code == 200) {
            let htmlStr = template("listId", res);
            $("tbody").html(htmlStr);
          }

          if(callback != null && res.data.data.length != 0){
             callback(res);
             $('#pagination-demo').show();
             $('.box').hide();
          }else if(res.data.data.length == 0 && res.data.totalPage != 0 && res.data.totalPage == mypage - 1){
              mypage -= 1;
              $('#pagination-demo').twbsPagination('changeTotalPages',res.data.totalPage,mypage);
          }else{
            $('#pagination-demo').hide();
             $('.box').show();
          }
        }   
      });
  };
      // 显示分页框
 //调用函数加载数据
 getComData(mypage, function (res) {
        $('#pagination').twbsPagination({
          totalPages: res.data.totalPage,
          visiblePages: 7,
          first: '首页',
          prev: '上一页',
          next: '下一页',
          last: '尾页',
          onPageClick: function (event, page) {
            mypage = page;
            getComData(mypage, function(){});
          }
        });
      })


// 点击按钮修改状态   动态生成的数据 用委托
// 通过
$('tbody').on('click','.btn-pass',function(){
  let id = $(this).attr('data-id');
  $.post({
    url : BigNew.comment_pass,
    data : {
      id : id
    },
    success : function(res){
    getComData(mypage,function(){})
    }
  })
});

// 拒绝
$('tbody').on('click','.btn-nopass',function(){
  let id = $(this).attr('data-id');
  $.post({
    url : BigNew.comment_reject,
    data : {
      id : id
    },
    success : function(res){
      getComData(mypage,function(){});
    }
  })
})

// 删除
$('tbody').on('click','.btn-delete',function(){
  let id = $(this).attr('data-id');
if(confirm('你确定要删除吗')){
  $.post({
    url : BigNew.comment_delete,
    data : {
      id : id,
    },
    success : function(res){
      getComData(mypage ,function(res){
        $('#pagination-demo').twbsPagination('changeTotalPages',res.data.totalPage,mypage);
      })
    }
  })
}
})
 });


  </script>
</html>
